<div class="matrix-farm" fxLayout="row" *ngIf="matrixFarm?.isChecked "  >
  <aside class="matrix-farm-aside" fxLayoutAlign="center center" *ngIf="matrixFarm?.isChecked">
    {{matrixFarm.farmName}}
  </aside>
  <article class="matrix-farm-article" fxLayout="column" fxFlex="100%">
    <header class="matrix-farm-header" fxLayout="row">         
       <div class="matrix-farm-group" fxLayout="row" *ngFor="let stateGroupTotal of matrixFarm.stateGroupTotals">
        <div *ngIf="matrixFarm.stateGroupTotals.lenght>1&&matrixFarm.stateGroupTotal.isChecked">
          <h4>
            {{stateGroupTotal.groupName}}
          </h4>
        </div>
        <div *ngFor="let stateTotal of stateGroupTotal.stateTotals" > 
          <div class="matrix-farm-state" [ngStyle]="{'background-color':stateTotal.stateColor}" *ngIf="stateTotal.isChecked">                   
            <span>{{stateTotal.stateName}}</span>
            (<span>{{stateTotal.stateTotal}}</span>)
          </div>            
        </div>
      </div> 
    </header>
    <section class="matrix-farm-section" fxFlex="100%" fxLayout="row" fxLayoutWrap>   
      <app-matrix-turbine 
        #matrixTurbine 
        fxFlex="4%" 
        *ngFor="let devices of matrixFarm.devices"
        (dblclick)="ondblclick(devices)"  
        [matrixTurbine]="devices"
        [ngClass]="{no:!devices?.isChecked,hover:true}"></app-matrix-turbine>
    </section>
  </article>
</div>